<template>
  <a-input :allow-clear="clearable"
           v-model.trim="newValue"
           :disabled="disabled"
           :readOnly="readonly"
           :maxLength="maxLength"
           @change="handleChange"
           @pressEnter="pressEnter"
           @blur="handleBlur"
           :defaultValue="defaultValue"
           :placeholder="placeholder"
           :addonAfter="addonAfter"
           :addonBefore="addonBefore"
           :prefix="prefix"
           :suffix="suffix"
           type="text">
  </a-input>
</template>

<script>
import PropTypes from '@zh/common-utils/prop-types'

export default {
  name: 'ZInput',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: PropTypes.string.def(undefined),
    defaultValue: PropTypes.string.def(undefined),
    maxLength: PropTypes.number.def(255),
    placeholder: PropTypes.string.def(undefined),
    clearable: PropTypes.bool.def(false),
    disabled: PropTypes.bool.def(false),
    readonly: PropTypes.bool.def(false),
    addonAfter: PropTypes.string.def(undefined),
    addonBefore: PropTypes.string.def(undefined),
    prefix: PropTypes.string.def(undefined),
    suffix: PropTypes.string.def(undefined)
  },
  data () {
    return {
      newValue: this.value || ''
    }
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler (value) {
        this.newValue = value || ''
      }
    }
  },
  methods: {
    handleChange () {
      this.newValue = this.newValue.replace(/[\^\\\\/:\\*\\?"\\|<>]+/g, '')
      this.$emit('change', this.newValue)
    },
    handleBlur () {
      this.newValue = this.newValue.replace(/[\^\\\\/:\\*\\?"\\|<>]+/g, '')
      this.$emit('blur', this.newValue)
    },
    pressEnter () {
      this.newValue = this.newValue.replace(/[\^\\\\/:\\*\\?"\\|<>]+/g, '')
      this.$emit('pressEnter', this.newValue)
    }
  }
}
</script>